<style>
.maxbox {
    width: 500px;
    background-color: aquamarine;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 2px 2px 10px rgb(150, 150, 150);
    border-radius: 10px;
}

.password {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.password-label {
    width: 100px;
    text-align: right;
    margin-right: 10px;
}
</style>

<template>
    <div class="maxbox">
        <div class="password">
            <span class="password-label">原始密码:</span>
            <el-input v-model="currentPassword" style="width: 240px" type="password" placeholder="请输入原始密码" show-password />
        </div>
        <div class="password">
            <span class="password-label">新密码:</span>
            <el-input v-model="newPassword" style="width: 240px" type="password" placeholder="请输入新密码" show-password />
        </div>
        <div class="password">
            <span class="password-label">确认新密码:</span>
            <el-input v-model="confirmPassword" style="width: 240px" type="password" placeholder="请确认新密码" show-password />
        </div>
        <el-button type="primary" @click="handleChangePassword">确认修改</el-button>
    </div>
</template>

<script setup>
import { ref } from 'vue'

// 独立的 ref
const currentPassword = ref('')
const newPassword = ref('')
const confirmPassword = ref('')

// 修改密码处理函数
const handleChangePassword = () => {
    if (newPassword.value !== confirmPassword.value) {
        alert('新密码和确认新密码不一致！')
    } else {
        console.log('原始密码:', currentPassword.value)
        console.log('新密码:', newPassword.value)
        alert('密码修改成功！')
        // 这里可以添加调用后端API的逻辑，保存新的密码
    }
}
</script>
